﻿@{
    ViewBag.Title = "站点地图";
}

<div class="page-content">
    <div class="page-header">
        <h1>
            站点管理
			<small>
                <i class="icon-double-angle-right"></i>
                sitemap
            </small>
        </h1>
    </div>
    <!-- /.page-header -->
    <div class="row">
        <div class="col-xs-4">
            <table class="table table-bordered table-fixed">
                <colgroup>
                    <col class="col-xs-2" />
                    <col />
                </colgroup>
                <caption>
                    <a href="#addDomain" data-bind="click: $root.addDomain" class="pull-right">添加</a>
                </caption>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>站点名称</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: domains">
                    <tr data-bind="click: $root.onDomainClick,
                        event: { dblclick: event.edit },
                        attr: { 'data-id': domainId },
                        css: { 'active': $root.selecteddomain() == $data }">
                        <td>
                            <div class="nobr">
                                <span data-bind="text: $index() + 1"></span>
                            </div>
                        </td>
                        <td>
                            <div class="nobr" data-bind="ifnot: _editing">
                                <span data-bind="text: domainName"></span>
                            </div>
                            <div class="input-group" data-bind="if: _editing">
                                <span class="input-group-addon" data-bind="click: $root.save"><i class="icon-save"></i></span>
                                <input type="text" class="form-control" data-bind="value: domainName" />
                                <span class="input-group-addon" data-bind="click: $root.remove"><i class="icon-remove"></i></span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-8">
            <table class="table table-bordered table-fixed">
                <colgroup>
                    <col class="col-xs-2" />
                    <col class="col-xs-1"/>
                    <col class="col-xs-3"/>
                    <col />
                </colgroup>
                <caption>
                    <a href="#addPage" data-bind="click: $root.addPage" class="pull-right">添加</a>
                </caption>
                <thead>
                    <tr>
                        <th>排序</th>
                        <th>图标</th>
                        <th>标题</th>
                        <th>地址</th>
                    </tr>
                </thead>
                <tbody data-bind="template: { name: 'page-template', foreach: pages, as: 'page' }">
                </tbody>
            </table>
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.page-content -->

@section cssPagePlugin {
    @AssetsHelper.RenderLess(paths: "/assets/Bootstrap/table.less")
    @AssetsHelper.RenderLess(paths: "/assets/Bootstrap/text.less")
}
@section styles {
    <style type="text/css">
        .nobr .hover-show {
            display: none;
            visibility: hidden;
        }
        .nobr:hover .hover-show {
            display: inline-block;
            visibility: visible;
        }
    </style>
}
@section jsPagePlugin {
}
@section scripts {
    @AssetsHelper.RenderJS(paths: "/assets/js/manage-sitemap.js")

    <script type="text/html" id="page-template">
        <tr data-bind="click: $root.onPageClick,
            event: { dblclick: event.edit },
            attr: { 'data-id': pageId },
            css: { 'active': $root.selectedpage() == $data }">
            <td data-bind="css: 'tree-lvl-' + _level()">
                <div class="nobr" data-bind="ifnot: _editing">
                    <i data-bind="click: event.expand,
                        css: { 'icon-plus-sign-alt': !_expand(), 'icon-minus-sign-alt': _expand() },
                        visible: pages().length > 0"></i>
                    <span data-bind="text: order"></span>
                    <span class="pull-right"><a  data-bind="click: $root.addChildPage"><i class="icon-plus hover-show"></i></a></span>
                </div>
                <div class="input-group" data-bind="if: _editing">
                    <span class="input-group-addon" data-bind="click: $root.save"><i class="icon-save"></i></span>
                    <input type="text" class="form-control" data-bind="value: order" />
                </div>
            </td>
            <td>
                <div class="nobr text-center" data-bind="ifnot: _editing">
                    <i data-bind="css: 'icon-' + icon()"></i>
                </div>
                <div class="input-group" data-bind="if: _editing">
                    <input type="text" class="form-control" data-bind="value: icon" />
                </div>
            </td>
            <td>
                <div class="nobr" data-bind="ifnot: _editing">
                    <span data-bind="text: title"></span>
                </div>
                <div class="input-group" data-bind="if: _editing">
                    <input type="text" class="form-control" data-bind="value: title" />
                </div>
            </td>
            <td>
                <div class="nobr" data-bind="ifnot: _editing">
                    <span data-bind="text: location"></span>
                </div>
                <div class="input-group" data-bind="if: _editing">
                    <input type="text" class="form-control" data-bind="value: location" />
                    <span class="input-group-addon" data-bind="click: $root.remove"><i class="icon-remove"></i></span>
                </div>
            </td>
        </tr>
        <!-- ko template: { name: 'page-template', foreach: pages, if: _expand } -->
        <!-- /ko -->
    </script>
}